<!-- 发布商品小视频组件 -->
<template>
  <div id="releaseVideo">
    <c-title :hide="false" text="发布视频" :url="'VideoList'"></c-title>
    <img :src="background" alt="" style="display: block; width: 100%;">
    <div class="content">
      <div class="contenHead" v-if="!plu_options.default_title">
        <van-cell-group class="settitle">
          <van-field @input="fieldBlur" v-model.trim="title" placeholder="标题：请输入标题，4-18个字" maxlength="18" />
        </van-cell-group>
      </div>

      <div class="main">
        <div class="video-wrap">
          <video
            preload="metadata"
            controlslist="nodownload"
            width="100%"
            height="100%"
            custom-cache="false"
            controls
            ref="video"
            webkit-playsinline="true"
            x5-video-player-type="h5"
            playsinline
            x5-playsinline=""
            x5-video-orientation="portrait"
            x5-video-player-fullscreen=""
            autoplay="autoplay"
            :src="videoUrl"
            id="video"
            v-show="videoUrl"
            style="background: #fff;"
          >
            <source :src="videoUrl" type="video/ogg" />
            <source :src="videoUrl" type="video/mp4" />
            <source :src="videoUrl" type="video/webm" />
            你的浏览器不支持video标签！
          </video>
          <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/images%2Fagreen_video.png" alt="" class="back_img" v-show="!videoUrl" />
          <input ref="videoInput" class="video-input" type="file" id="file" accept="video/*" v-show="!videoUrl" @change="onReadVideo" />
          <p style="margin: 0 0.59rem 0 0.59rem; text-align: left; color: #757575; font-size: 0.69rem;" v-if="!videoUrl">
            上传视频
          </p>
          <p class="video-guide" v-show="!videoUrl" @click="requestVideoPermissions">
            <!-- 用于触发权限检查 -->
          </p>
          <i @click.stop="removeImg('video')" v-if="videoUrl" class="iconfont icon-guanbi deletaIcon"></i>
        </div>
        <div class="video_Cover">
          <van-uploader ref="uploader" :after-read="onRead" style="width: 100%;">
            <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/images%2Fuppictures.png" alt="" style="height: 2.75rem;" class="cover_img" v-show="!videoCover" />
          </van-uploader>
          <van-image-preview v-model="showOpen" :images="images"></van-image-preview>
          <img :src="videoCover" alt="" class="cover_img1" v-if="videoCover" @click.stop="showOpen = true" />
          <p style="color: #757575; font-size: 0.69rem;" v-show="!videoCover">上传图片</p>
          <p class="video-guide" @click.stop="requestIMGPermissions">
            <!-- 用于触发权限检查 -->
          </p>
          <i @click.stop="removeImg('img')" v-if="videoCover" class="iconfont icon-guanbi deletaIcon"></i>
        </div>
      </div>
      <!-- <span class="changeGoodClass" v-if="!this.fun.isTextEmpty(this.chooseGoods)" @click="gotoAdd">更换商品</span> -->
    </div>
    <van-field v-if="is_show_cate && !plu_options.default_cate" readonly clickable :value="category_name" label="分类" placeholder="点击选择分类" @click="getCategory" />

    <div class="goodsSelect" v-if="isNeedGoods">
      <div class="title">选择商品</div>
      <div class="goood-class" v-if="!this.fun.isTextEmpty(this.chooseGoods)">
        <img :src="chooseGoods.thumb" alt="" />
        <div class="right-class">
          <p>{{ chooseGoods.title }}</p>
          <div class="price">
            <span class="now-price">{{ $i18n.t("money") }}{{ chooseGoods.price }}</span>
            <span class="old-price">原价：{{ $i18n.t("money") }}{{ chooseGoods.market_price }}</span>
            <div class="chooseGoods" @click="gotoAdd" :style="{color:theme_color,border: `1px solid ${theme_color}`}">
              <i class="iconfont icon-gouwu" ></i>
              <span>更换</span>
            </div>
          </div>
        </div>
      </div>
      <div v-else class="isNone" @click="BtnMethos" :style="{color:theme_color,border: `1px solid ${theme_color}`}">
        <i class="iconfont icon-tianjia" ></i>
        <span>添加商品</span>
      </div>
    </div>

    <div class="bottomBtn" :style="{ width: this.fun.getPhoneEnv() == 3 ? '375px' : '100%' }">
      <!-- <span :style="{background:theme_color}" @click="BtnMethos" v-show="!showUploadBtn && !uploadIng">{{ isNeedGoods && this.fun.isTextEmpty(this.chooseGoods) ? "添加商品" : "确认发布" }} </span> -->
      <span :style="{background:theme_color}" @click="BtnMethos" v-show="!showUploadBtn&& !uploadIng">{{plu_options.upload_button||'确认发布'}}</span>
      <span :style="{background:theme_color}" @click="play_Upload" v-show="showUploadBtn">上传视频</span>
      <span :style="{background:theme_color}" v-show="!showUploadBtn && uploadIng">视频上传中... </span>
    </div>

    <p class="textCheck" style="margin-top: 0.75rem; text-align: left; color: #999;">{{plu_options.notice}}</p>
    <van-checkbox icon-size="16px" v-model="checked" class="textCheck" :checked-color="theme_color">已详读并同意<span :style="{color:theme_color}" @click.stop="gotoAgreement">《{{plu_options.diy_title||'用户协议'}}》</span></van-checkbox>
    <div style="height: 2.8125rem;"></div>

    <van-popup v-model="showGoods" closeable round position="bottom" :style="{ height: '50%' }">
      <videoGood @closeChooseGoods='closeChooseGoods'></videoGood>
    </van-popup>
    <van-popup v-model="showCategory" closeable round position="bottom" :style="{ height: '50%' }">
      <van-nav-bar title="请选择分类" />
      <form action="/">
        <van-search v-model="searchWord" shape="round" show-action placeholder="搜索分类">
          <template #action>
            <div>搜索</div>
          </template>
        </van-search>
      </form>
      <van-radio-group v-model="category_id">
        <van-cell-group v-for="item in categoryFilterList" :key="item.id" style="text-align: left;">
          <van-cell :title="item.name" clickable @click="clickCategory(item)">
            <template #right-icon>
              <van-radio checked-color="#ee0a24" :name="item.id" >
                <template #icon="props">
                  <img class="img-icon" :src="props.checked ? 'https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/images%2FagreenSelect.png' : ''" v-show="props.checked"/>
                </template>
              </van-radio>
            </template>
          </van-cell>
        </van-cell-group>
      </van-radio-group>
    </van-popup>
    <van-popup v-model="showAgreement" class="mint-popup-3" position="right" closeOnClickModal="true" modal="false" style="z-index: 9999;">
      <div class="city-info">
        <van-nav-bar left-arrow title="协议" fixed @click-left="popClose" :class="[this.fun.getPhoneEnv() == 3 ? 'pcStyle' : '']" />
        <div>
          <div style="height: 3rem; clear: both;"></div>
          <div v-html="protocol_content" style="margin: 0 20px;"></div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import release_video_controller from "./release_video_controller";
export default release_video_controller;
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
.img-icon {
  width: 1rem;
  height: 1rem;
}

#releaseVideo {
  .content {
    background: #fff;
    padding: 1rem 0;
    overflow: hidden;

    .contenHead {
      .van-cell {
        padding: 1rem 0.75rem;
      }
    }

    ::v-deep .van-field__label {
      width: 2rem;
    }

    .settitle::after {
      border: none;
    }

    .main {
      display: flex;
      padding: 0 0.875rem;
      justify-content: center;
      font-size: 0.75rem;
    }

    .video_Cover {
      position: relative;
      width: 7.75rem;
      height: 6.78rem;
      font-size: 0.75rem;
      background: #f7f7f7;
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: relative;
      border: 1px dashed #d1d1d1;
      border-radius: 0.25rem;

      .cover_img,
      .cover_img1 {
        max-width: 100%;
        height: 100%;
        // object-fit: none;
        margin: 0 auto;
      }

      .cover_img1 {
        object-fit: contain;
      }

      p {
        text-align: center;
        padding: 0 0.5rem;
      }
    }

    .video-wrap {
      margin-right: 0.75rem;
      width: 7.75rem;
      height: 6.78rem;
      position: relative;
      display: flex;
      flex-direction: column;
      background: #f7f7f7;
      align-items: center;
      // overflow: hidden;
      border: 1px dashed #d1d1d1;
      border-radius: 0.25rem;
      justify-content: center;

      .back_img {
        width: 2.75rem;
        height: 2.75rem;
        margin-bottom: 0;
        margin-top: 0;
      }

      .video-input {
        width: 100%;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        opacity: 0;
      }
    }

    .deletaIcon {
      font-size: 0.25rem;
      padding: 0.25rem;
      box-sizing: border-box;
      background: #999;
      color: #fff;
      position: absolute;
      top: -0.5rem;
      right: -0.5rem;
      border-radius: 100%;
    }

    .changeGoodClass {
      display: inline-block;
      width: 14.38rem;
      height: 2.5rem;
      font-size: 1rem;
      color: #f15353;
      line-height: 2.5rem;
      margin-top: 1.88rem;
      border-radius: 0.25rem;
      border: solid 0.0625rem #f15353;
    }
  }

  .video-guide {
    position: absolute;
    color: #fff;
    width: 100%;
    height: 100%;
  }

  .goodsSelect {
    margin-top: 0.75rem;
    background: #fff;
    overflow: hidden;
    box-sizing: border-box;

    .title {
      text-align: left;
      font-size: 0.88rem;
      margin-top: 1rem;
      margin-left: 0.75rem;
      margin-bottom: 1rem;
    }

    .goood-class {
      // width: 100%;
      display: flex;
      // margin: 0.63rem 0.94rem 3.94rem;
      padding: 0 0.75rem 1.06rem 0.75rem;
      background: #fff;

      img {
        width: 5rem;
        height: 4.34rem;
        border-radius: 0.13rem;
        // margin: 0.63rem;
        margin-right: 0.5rem;
      }

      .right-class {
        flex: 1;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        padding: 0;

        p {
          overflow: hidden;
          text-overflow: ellipsis; //超出部分以省略号显示
          white-space: nowrap;
          width: 100%;
          text-align: left;
          color: #333;
          font-size: 15px;
          flex-shrink: 0;
        }

        .price {
          flex: 1;
          display: flex;
          align-items: flex-start;
          flex-direction: column;
          justify-content: flex-end;
          position: relative;

          .chooseGoods {
            position: absolute;
            top: 0.13rem;
            right: 0;
            border: 1px solid #4978f8;
            border-radius: 1.13rem;
            padding: 0.25rem 0.5rem;
            font-size: 0.81rem;
            color: #4978f8;
            display: flex;
            align-items: center;

            img {
              width: 1rem;
              height: 1rem;
              margin-right: 0.25rem;
            }

            span {
              flex-shrink: 0;
            }
          }

          .now-price {
            max-width: 70%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: #f15353;
            font-weight: bold;
            margin-right: 1.19rem;
            font-size: 0.94rem;
          }

          .old-price {
            max-width: 70%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 0.75rem;
            color: #8c8c8c;
            text-decoration: line-through;
          }
        }
      }
    }
  }

  .bottomBtn {
    // position: fixed;
    // bottom: 0;
    width: 100%;
    // height: 3.31rem;
    margin-top: 2rem;
    // background: #fff;
    // border-top: solid 0.0625rem #ebebeb;
    display: flex;

    span {
      display: inline-block;
      width: 18.44rem;
      height: 2.25rem;
      background: rgba(73, 120, 248, 0.39);
      border-radius: 1.13rem;
      margin: 0 auto;
      line-height: 2.25rem;
      margin-top: 0.34rem;
      box-sizing: border-box;
      font-size: 1rem;
      color: #fff;
    }
  }
}

.city-info {
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
  width: 100vw;
  height: 100vh;
  background: #fff;
  border: none;
}

#a_content {
  margin: 0 20px;
}

.textCheck {
  margin: 0 1.75rem;
}

.isNone {
  margin: 0 auto;
  margin-bottom: 1rem;
  width: 6rem;
  border-radius: 1.13rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.31rem 0.5rem;
  box-sizing: border-box;

  img {
    margin-right: 0.3rem;
    width: 1rem;
    height: 1rem;
  }

  span {
    font-size: 0.81rem;
    font-weight: 400;
  }

  .icon-tianjia {
    margin-right: 0.325rem;
  }
}
</style>
